<template>
  <div class="table-component">
    <div class="total-amount">
      <div class="total-amount-title">支付明细</div>
    </div>
    <div class="card-content">
      <div class="card-item row">
        <div>
          <img :src="iconPicture" class="icon-img" alt="" />
        </div>
        <div>
          <div class="card-item-title">订单总额（元）</div>
          <div class="card-item-value" style="color: #e93423">
            {{ orderDetails.totalFee }}
          </div>
        </div>
      </div>
      <div class="card-item row">
        <div>
          <img :src="iconPicture" class="icon-img" alt="" />
        </div>
        <div>
          <div class="card-item-title">优惠抵扣金额（元）</div>
          <div class="card-item-value" style="color: #39b52b">
            {{ orderDetails.discountDeduction }}
          </div>
        </div>
      </div>
      <div class="card-item row">
        <div>
          <img :src="iconPicture" class="icon-img" alt="" />
        </div>
        <div>
          <div class="card-item-title">应收金额（元）</div>
          <div class="card-item-value" style="color: #2986ff">
            {{ orderDetails.receivable }}
          </div>
        </div>
      </div>
    </div>
    <div class="row-content">
      <el-table
        :data="table.data"
        :loading="table.loading"
        style="width: 100%"
        :header-cell-style="{
          background: '#F1F1F1',
          'font-size': '14px',
          'font-weight': 600,
          color: '#333333',
        }"
        :cell-style="{
          'font-size': '14px',
          'font-weight': 400,
          color: '#333333',
        }"
        border
      >
        <el-table-column label="支付状态" min-width="90">
          已支付</el-table-column
        >
        <el-table-column
          prop="discountDeduction"
          label="抵扣金额（元）"
          min-width="130"
        />
        <el-table-column
          prop="received"
          label="实付金额（元）"
          min-width="130"
        />
        <el-table-column prop="licensePlate" label="计入明细" min-width="100">
          计入营业额
        </el-table-column>
        <el-table-column label="支付渠道" min-width="90">
          <template #default="scope">
            {{
              scope.row.payChannel == 1
                ? "APP"
                : scope.row.payChannel == 2
                ? "小程序"
                : "PDA"
            }}
          </template>
        </el-table-column>
        <el-table-column label="支付方式" min-width="90">
          <template #default="scope">
            {{
              scope.row.payPattern == 0
                ? "免费"
                : scope.row.payPattern == 1
                ? "微信"
                : scope.row.payPattern == 2
                ? "支付宝"
                : scope.row.payPattern == 3
                ? "钱包"
                : "现金"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="支付成功时间" min-width="170" />
        <el-table-column prop="payUser" label="支付用户" min-width="120" />
        <el-table-column prop="cashier" label="PDA收费员" min-width="130" />
        <template #empty>
          <el-empty :image="imgNone" />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, watch, onMounted } from "vue";
import iconPicture from "@/assets/image/ico/orderManagements/icon-picture.png";

const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});
const imgNone = new URL("@/assets/image/imgNone.png", import.meta.url).href;

// 表格
const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

onMounted(() => {
  watch(
    () => props.orderDetails,
    (newVal, oldVal) => {
      if (newVal) {
        getData();
      }
    },
    {
      immediate: true, // 立即执行一次
      deep: true, // 深度监听对象内部变化
    }
  );
});

const getData = () => {
  table.data = props.orderDetails.orderPayDetails;
  table.loading = false;
};

getData();
</script>

<style lang="less" scoped>
.table-component {
  .total-amount {
    margin-bottom: 37px;
  }
  .total-amount-title {
    font-weight: 600;
    font-size: 26px;
    color: #333333;
  }
  .row-content {
    margin-top: 36px;
  }
  .card-content {
    display: flex;
    justify-content: space-between;
    .card-item {
      // flex: 1;
      width: 30%;
      border-radius: 2px;
      border: 1px solid #c6c6c6;
      padding: 24px 32px;
    }
    .card-item-title {
      font-weight: 600;
      font-size: 18px;
      color: #333333;
      margin-bottom: 7px;
    }
    .card-item-value {
      font-weight: 600;
      font-size: 24px;
    }
  }
  .row {
    display: flex;
    align-items: center;
  }
  .icon-img {
    margin-right: 20px;
  }
}
</style>